<template>
  <div class="app">
    <button @click="btnClick('HmAaa')">显示A组件</button>
    <button @click="btnClick('HmBbb')">显示B组件</button>
    <!-- <HmAaa v-if="str === 'aaa'"></HmAaa>
    <HmBbb v-else-if="str === 'bbb'"></HmBbb> -->
    <!-- 动态组件
    is的值是什么，它就渲染什么组件，is一定要绑定    
     -->
    <component :is="str"></component>
    <ul>
      <li v-for="(item, index) in arr" :key="index">{{ item }}</li>
    </ul>
    <div v-for="(value, key, index) in obj" :key="index">
      {{ value }}-----{{ key }}-----{{ index }}
    </div>
    <hr />
    <div>
      <div v-for="(item, index) in 10" :key="index">{{ item }}</div>
    </div>
    <!-- v-for:
                数组：  v-for="(item,index) in 数组"
                对象:  v-for="(value,key,index)  in 对象"
                数字： v-for="(item,index) in 10"   10===[1,2,3,4,5,6,7,8,9,10]     
     -->
    <!-- <div
      v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
      :key="index"
    ></div> -->
  </div>
</template>
<script>
import HmAaa from '@/components/HmAaa.vue'
import HmBbb from '@/components/HmBbb.vue'
export default {
  components: {
    HmAaa,
    HmBbb
  },
  data () {
    return {
      str: 'HmAaa',
      arr: [1, 2, 3, 4, 5],
      obj: {
        name: '张三',
        age: 18
      }
    }
  },
  methods: {
    btnClick (val) {
      this.str = val
    }
  }
}
</script>
<style lang="less" scoped>
/*
定义变量：@变量名:值
嵌套
&:代表父级
运算
定义方法
*/
.setWH(@w,@h) {
  width: @w;
  height: @h;
}
.app {
  // width: 300px;
  // height: 300px;
  .setWH(1300px, 300px);
  background-color: #f00;
  &:hover {
    background-color: pink;
  }
  button {
    padding: 15px;
  }
}
</style>
